import React, { useState } from 'react';
import {
  Button,
  Form,
  Input, message,
  Select,
} from 'antd';
import {history} from "@@/core/history";
import {userRegisterUsingPost} from "@/services/zhudiApi-backend/userController";

const { Option } = Select;


const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

const Register: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = async (values: API.UserRegisterRequest) => {
    try {
      // 登录
      const res = await userRegisterUsingPost({
        ...values,
      });
      if (res.data) {
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/');
        // setInitialState({
        //   loginUser: res.data
        // });
        return;
      }
      if(res.code!=0){
        message.error(res.description);

      }
    } catch (error) {
      console.log("error response",error);
      // 如果错误对象包含更具体的错误信息，就使用后端的错误信息
      // @ts-ignore
      const errorMessage =  error.message;

      console.log(error);
      message.error(errorMessage);
    }
  };



  const [autoCompleteResult] = useState<string[]>([]);
  autoCompleteResult.map((website) => ({
    label: website,
    value: website,
  }));
  return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
      style={{ maxWidth: 600 }}
      scrollToFirstError
    >
      <Form.Item
        name="userName"
        label="用户名"
        rules={[{ required: true, message: '请输入你的用户名!', whitespace: true }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: '请输入你的密码' }]}
        hasFeedback
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="confirmPassword"
        label="确认密码"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: '请确认你的密码',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('两次密码不一致'));
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="gender"
        label="性别"
        rules={[{ required: true, message: 'Please select gender!' }]}
      >
        <Select placeholder="select your gender">
          <Option value="male">男</Option>
          <Option value="female">女</Option>
          <Option value="other">其他</Option>
        </Select>
      </Form.Item>

      {/*<Form.Item*/}
      {/*  name="phone"*/}
      {/*  label="手机号"*/}
      {/*  rules={[*/}
      {/*    { required: true, message: '请输入你的手机号' },*/}
      {/*    { pattern: /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/, message: 'Please enter a valid phone number!' },*/}
      {/*  ]}*/}
      {/*>*/}
      {/*  <Input style={{ width: '100%' }} />*/}
      {/*</Form.Item>*/}
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          Register
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Register;
